<template>
    <div class="moveBox" :style="position" ref="box" @mousedown="mousedown" @mousemove="mousemove" @mouseout="mouseout"
        @mouseup="mouseup">
        <div class="moveHead">
            {{ title }}
        </div>
        <div class="close" @click="toggleShow">
            X
        </div>
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onMounted, computed, reactive, ref, getCurrentInstance, onUnmounted } from 'vue'
import { useData } from "@/utils/useData.js"
const { store } = useData()

const { title } = defineProps({
    title: {
        type: String,
        default: '这是标题'
    }
})

const emit = defineEmits(['isClose'])
const box = ref()
const x = ref(600)
const y = ref(200)
//盒子位置
const position = computed(() => {
    return { left: `${x.value}px`, top: `${y.value}px` }
})

//盒子距离左侧的距离
const leftOffset = ref(0)
const topOffset = ref(0)

//关闭事件
const toggleShow = () => {
    emit('isClose', false)
}
// 判断是否摁下
const isMove = ref(false)
const mousedown = (event) => {
    //获取位置信息的方法
    const box_xy = box.value.getBoundingClientRect()
    //鼠标左侧距离减去盒子左侧距离得到鼠标距离盒子左侧的距离
    leftOffset.value = (event.clientX) - box_xy.left
    topOffset.value = (event.clientY) - box_xy.top
    isMove.value = true
}

const mousemove = (event) => {
    if (!isMove.value) {
        return
    }
    //盒子移动后距离左侧的距离
    x.value = ((event.clientX) - leftOffset.value) / store.state.scale.width
    y.value = ((event.clientY) - topOffset.value) / store.state.scale.height
}

const mouseout = (event) => {
    isMove.value = false
}

const mouseup = (event) => {
    isMove.value = false
}

</script>

<style lang="less" scoped>
.moveBox {
    z-index: 100;
    width: 768px;
    position: fixed;
    box-shadow: 0 0 5px 3px rgba(17, 56, 112, 0.72);
    background-color: black;

    .moveHead {
        line-height: 30px;
        font-size: 18px;
        height: 30px;
        background-color: rgba(17, 56, 112, 0.5);
        cursor: move;
    }

    .close {
        position: absolute;
        right: 0;
        top: 0;
        line-height: 30px;
        font-size: 24px;
        cursor: pointer;
        display: block;
        width: 30px;
        height: 30px;
        text-align: center;
    }
}


</style>